import { auditStateMap } from "@user/auth/dict";
import styles from "../../index.module.less";
import {
  defaultDrawerColumns,
  drawerFormState,
  isNotShowAuthTime,
  isNotShowCheckedTime,
  isShowAuthInfo,
  isShowAuthProcess,
  isShowAuthVideo,
  isShowIdentityInfo,
  isShowRealAuthPhoto,
  voteIconOptions,
} from "../../store";
import UserDetail from "@user/pay/userDetail";
const userDetailLoading = ref(false);
export default defineComponent({
  components: {
    UserDetail,
  },
  setup(props, { emit }) {
    const router: any = useRouter();
    const { currentRoute } = router;
    const authIconStatusObject = {
      1: {
        icon: "icon-tishi4",
        color: "#ffc107",
      },
      2: {
        icon: "icon-duigou1",
        color: "#52c41a",
      },
      3: {
        icon: "icon-cuowu",
        color: "#dc3545",
      },
    };
    const isShowAuthStatus = () => {
      if (currentRoute.value.path === "/user/auth") {
        const colorOptions = reactive({
          1: "s-ffc107",
          2: "s-52c41a",
          3: "s-dc3545",
        });
        return (
          <i class={colorOptions[drawerFormState.status]}>
            {selectDictLabel(auditStateMap, drawerFormState.status)}
          </i>
        );
      }

      if (currentRoute.value.path === "/user/popular") {
        return (
          <i>
            {drawerFormState.status === 4
              ? $t("dict0")
              : drawerFormState.status === 6 || drawerFormState.status === 2
              ? $t("dict2")
              : $t("dict1")}
          </i>
        );
      }
    };
    return () => (
      <>
        <div class={[styles.cert_wrap, "mb16"]}>
          <s-title>{$t("base.authInfo")}</s-title>
          <div class={styles.identity_wrap}>
            {isShowIdentityInfo.value ? (
              <>
                <div class={styles.tit_wrap}>
                  <span class={styles.sub_tit}>
                    <i>{$t("popular0")} </i>
                  </span>
                </div>
                <div class={styles.Flex}>
                  <span>
                    <i>{$t("popular1")}: </i>
                    <i>{drawerFormState.educational}</i>
                  </span>
                  <span>
                    <i>{$t("popular2")}: </i>
                    <i>{drawerFormState.income}</i>
                  </span>
                  <span>
                    <i>{$t("popular3")}: </i>
                    <i>{drawerFormState.occupation_cate}</i>
                    {drawerFormState.occupation_cate ? (
                      <a-divider class={styles.divider} type="vertical" />
                    ) : null}

                    <i>{drawerFormState.occupation_post}</i>
                  </span>
                </div>
              </>
            ) : null}

            {isShowAuthInfo.value ? (
              <div class={styles.Flex}>
                {isNotShowAuthTime.value ? null : (
                  <span>
                    <i>{$t("table52")}: </i>
                    <i>
                      {!isEmptyType(drawerFormState.created_at)
                        ? getTimeByZone(drawerFormState.created_at)
                        : null}
                    </i>
                  </span>
                )}
                <span>
                  <i>{$t("table55")}: </i>
                  {isShowAuthStatus()}
                </span>
                {isNotShowCheckedTime.value ? null : (
                  <span>
                    <i>{$t("table72")}: </i>
                    <i>
                      {!isEmptyType(drawerFormState.updated_at)
                        ? getTimeByZone(drawerFormState.updated_at)
                        : null}
                    </i>
                  </span>
                )}
              </div>
            ) : null}

            {isShowRealAuthPhoto.value ? (
              <div class={styles.auth_photo}>
                <div class={styles.title}>{$t("popular12")}</div>
                <div class={styles.content}>
                  <div class={styles.tips}>{$t("popular13")}</div>
                  <div style="width: 80px; height: 80px;">
                    {drawerFormState.client_avatar ? (
                      <a-image
                        width="100%"
                        height="100%"
                        src={drawerFormState.client_avatar}
                      />
                    ) : null}
                  </div>
                </div>
                <div class={styles.title}>{$t("popular14")}</div>
                <div class={styles.content}>
                  <div class={styles.flex}>
                    <div class={styles.flex_item}>
                      {renderIcon(
                        authIconStatusObject[drawerFormState.status]?.icon,
                        null,
                        ` color: ${
                          authIconStatusObject[drawerFormState.status]?.color
                        }`
                      )}
                      <span>{$t("popular15")}</span>
                    </div>
                    <div class={styles.flex_item}>
                      {renderIcon(
                        authIconStatusObject[drawerFormState.status]?.icon,
                        null,
                        ` color: ${
                          authIconStatusObject[drawerFormState.status]?.color
                        }`
                      )}

                      <span>{$t("popular16")}</span>
                    </div>

                    <div class={styles.flex_item}>
                      {renderIcon(
                        authIconStatusObject[drawerFormState.status]?.icon,
                        null,
                        ` color: ${
                          authIconStatusObject[drawerFormState.status]?.color
                        }`
                      )}

                      <span>{$t("popular17")}</span>
                    </div>
                  </div>
                  <div style="width: 80px;height: 80px;">
                    {drawerFormState.real_photo ? (
                      <a-image
                        width="100%"
                        height="100%"
                        src={drawerFormState.real_photo}
                      ></a-image>
                    ) : null}
                  </div>
                </div>
              </div>
            ) : (
              <>
                <div class={styles.tit_wrap}>
                  <span class={styles.sub_tit}>
                    <i>{$t("table53")} </i>
                  </span>
                </div>
                <div class={styles.tips}>
                  <div class={styles.row}>
                    {!isEmptyType(drawerFormState.estimate) ? (
                      <span>
                        {drawerFormState.estimate === "Powerful"
                          ? $t("popular4")
                          : drawerFormState.estimate === "Handsome"
                          ? $t("popular5")
                          : null}
                      </span>
                    ) : null}

                    {drawerFormState.estimate === "Powerful" &&
                    drawerFormState.sex === 1 ? (
                      <span>
                        {$t("popular6")}
                        {drawerFormState.estimate === "Powerful"
                          ? $t("popular4")
                          : drawerFormState.estimate === "Handsome"
                          ? $t("popular5")
                          : null}
                        {$t("popular7")}
                      </span>
                    ) : null}
                  </div>

                  <div class={styles.row}>
                    {drawerFormState.portrait1 ? (
                      <a-image
                        class={styles.img_item}
                        src={drawerFormState.portrait1}
                      />
                    ) : null}

                    {drawerFormState.portrait2 ? (
                      <a-image
                        src={drawerFormState.portrait2}
                        class={styles.img_item}
                      />
                    ) : null}

                    {drawerFormState.portrait3 ? (
                      <a-image
                        src={drawerFormState.portrait3}
                        class={styles.img_item}
                      />
                    ) : null}
                  </div>
                </div>
              </>
            )}

            {isShowAuthVideo?.value ? (
              <>
                <div class={styles.tit_wrap}>
                  <span class={styles.sub_tit}>
                    <i>{$t("table54")}</i>
                  </span>
                </div>

                <div class="ml8">
                  <video-player v-model={drawerFormState.verify_video} />
                </div>
              </>
            ) : null}
          </div>
        </div>

        {isShowAuthProcess?.value ? (
          <div class={[styles.process_wrap, "mb16"]}>
            <s-title>
              <div class={styles.tit_wrap}>
                <span>
                  <i>{$t("table50")}</i>
                </span>
                <span class={styles.join}>
                  <i>{$t("table112")}:</i>
                  <i>{drawerFormState.voteProgress}</i>
                </span>
              </div>
            </s-title>
            <a-row class="s-drawer-extra-row ml8">
              <a-col span={24}>
                <s-table
                  scroll={{ x: "auto", y: 350 }}
                  pagination={false}
                  bordered={true}
                  columns={defaultDrawerColumns[0]}
                  dataSource={drawerFormState.userVotes}
                  loading={userDetailLoading}
                  onChange={(paging: {
                    current: number;
                    pageSize: number;
                  }) => {}}
                  tableSlot={{
                    bodyCell: ({ value, text, index, column, record }: any) => {
                      switch (column.key) {
                        case "index":
                          return (
                            <div class="s-table-body_cell">
                              <i>{index + 1}</i>
                            </div>
                          );

                        case "status":
                          return (
                            <div class="s-table-body_cell">
                              {renderIcon(voteIconOptions[record.status])}
                            </div>
                          );

                        case "userInfo":
                          return renderUserInfo({
                            record,
                            tableLoading: userDetailLoading,
                          });
                      }
                    },
                  }}
                />
              </a-col>
            </a-row>
          </div>
        ) : null}
      </>
    );
  },
});
